<!-- 双轴折线图 -->
<template>
    <div id="container">     
    </div>
</template>

<script>

import { Pie } from '@antv/g2plot';
 
export default {
    props:[
        'data',
        'centerText',
    ],
    data(){
        return {
            pipGraph: null,
        }
    },
    mounted(){
        console.log(this.data)
        this.pipGraph = new Pie('container', {
        appendPadding: 10,
        data: this.data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
            textAlign: 'center',
            fontSize: 14,
            },
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
            title: false,
            content: {
            style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
            },
            content: this.centerText,
            },
        },
        });
        this.pipGraph.render();
    },
    methods:{
        update(){
            this.pipGraph.update(
                {
                    data: this.data
                }
            )
            this.pipGraph.render()
            console.log("update render", this.data)
        }
    },
    watch:{
        data(){
            this.update()
        }
    }
}
</script>

<style scoped lang="less">

</style>